@import "app/functions";
@import "theme/anthracite/import";
@import "components/text";


// GENERAL
body {
    background: _color("primary");
    padding: 10px 50px;
}

ul {
    padding: 0;
    list-style: none;
}

#clipboard {
    position: absolute;
    left: -20000px;
}

#toast {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: _transition("opacity", "quick");



    .message {
        background: _color("tertiary");
        display: inline-block;
        padding: 10px;
        @include text(_size("normal"), _color("secondary"), _weight("normal"), _font("raleway"));

        &:before {
            content: "Copied to clipboard";
            display: block;
            margin-bottom: 5px;
            @include text(_size("small"), _color("secondary"), _weight("extrabold"), _font("raleway"));
        }
    }

    &.on {
        opacity: 1;
    }
}


// PROPERTY ROW DEFS
.example,
.variant,
.value,
.key,
.colheader {
    vertical-align: top;
    width: 24%;
    display: inline-block;
    padding: 8px 0;
    position: relative;
    margin-bottom: 1px;
    @include text(_size("normal"), _color("secondary"), _weight("normal"), _font("nunito"));
}


.example {
    @include text(_size("normal"), _color("secondary"), _weight("normal"), _font("nunito"));
    height: 19px;

    &.colors {
        border-left: 50px solid red;
        width: calc(24% - 50px);
    }

    &.icons {
        border: none;
        width: 24%;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .DS-section[data-collectiontype="dictionary"] & {
        display: none
    }
}

.variant {

}

.value {
    .DS-section[data-collectiontype="dictionary"] & {
        width: 48%
    }
}

.key {
    background: _color("tertiary");
    padding-left: 10px;

    .colheadergroup & {
        background: transparent;
    }
}

.colheader {
    text-transform: uppercase;
    font-size: _size("tiny");
    font-weight: _weight("bold");
    height: 20px;
}


.toggle-all {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.button-default {
    border: none;
    background: _color("primary");
    padding: 6px 10px;
    @include text(_size("normal"), _color("secondary", d), _weight("light"), _font("raleway"));

    outline: none;

    &:hover {
        color: _color("secondary");
        cursor: pointer;
    }
}

.copy-button {
    border: none;
    background: #363636;
    padding: 10px 10px;
    right: 0;
    top: 0;
    outline: none;
    position: absolute;
    @include text(_size("normal"), _color("secondary", d), _weight("light"), _font("raleway"));
    &:hover {
        color: _color("secondary");
        cursor: pointer;
    }
}

// HEADER
.DS-header {

    .DS-header--title {
        margin-bottom: 0;

        @include text(_size("big"), _color("secondary", normal), _weight("light"), _font("raleway"));
    }

    .DS-header--description {
        margin-top: 0;
        @include text(_size("normal"), _color("secondary", normal), _weight("light"), _font("raleway"));
    }
}


// TOP LEVEL SECTION (IE COLORS)
.DS-section {
    margin-bottom: 10px;
    padding: 20px;
    position: relative;

    .DS-section--header {
        background: url(_icon("arrowExpand", "grey")) left center no-repeat ;
        padding-left: 20px;
        margin: 0;
        display: inline;
        @include text(_size("medium"), _color("secondary", normal), _weight("light"), _font("raleway"));

        &:hover {
            cursor: pointer;
        }
    }

    .DS-sectionGroup {
        display: none;
    }

    // SECTION IS OPEN
    &.open {
        .DS-sectionGroup {
            display: block;
        }

        .DS-section--header {
            background-image: url(_icon("arrowCollapse", "grey"));
        }

        .toggle-all {
            display: block;
        }
    }
}

// SECTION GROUP (IE COLORS > BLACK)
.DS-sectionGroup {
    margin: 20px 0 0;
    background: _color("primary", c);
    padding: 20px;
    position: relative;

    .DS-sectionGroup--swatch {
        width: 20px;
        height: 20px;
    }

    .DS-sectionGroup--swatch {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 40px;
        background-repeat: no-repeat;
        background-size: 100%;
        pointer-events: none;

    }

    [data-collectionType="icons"] &,
    [data-collectionType="colors"] & {
        .DS-sectionGroup--header[data-hasSwatch=true] {
            padding-left: 50px;
        }
    }



    .DS-sectionSubGroup {
        display: none;

        .DS-sectionSubGroup--description {
            display: none;
        }
    }

    .DS-sectionGroup--header {
        background: url(_icon("arrowExpand", "grey")) left center no-repeat ;
        padding-left: 20px;
        margin: 0;
        display: inline;
        @include text(_size("medium"), _color("secondary"), _weight("light"), _font("raleway"));

        &:hover {
            cursor: pointer;
        }

    }

    // SECTION GROUP IS OPEN
    &.open {
        .DS-sectionSubGroup {
            display: block;
            padding-left: 20px;
        }

        .DS-sectionGroup--header {
            background-image: url(_icon("arrowCollapse", "grey"));
        }
    }
}




// Create Color CSS
@each $base-color, $palette in $colors {
    .colors-#{$base-color} {
        .DS-sectionGroup--swatch {
            background: _color($base-color, normal);
        }
    }

    // Loop through variations
    @each $color-variation, $hex in map-get($colors, $base-color) {
        .colors-#{$base-color}-#{$color-variation} {

            .example.colors {
                border-left-color: $hex;
            }

            .variant:before {
                content: " #{$color-variation} "
            }

            .value:before {
                content: " #{$hex} "
            }

            .key:before {
                content: "_color('" + $base-color + "', " + $color-variation + ")"
            }

        }
    }

}



// Create Icon CSS
@each $icon, $variants in $icons {
    // Loop through variations
    @each $icon-variation, $url in map-get($icons, $icon) {


        .icons-#{$icon} {
            .DS-sectionGroup--swatch {
                background-image: url($url);

            }
        }


        .icons-#{$icon}-#{$icon-variation} {


            .example.icons {
                background-image: url($url);
            }

            .variant:before {
                content: " #{$icon-variation} "
            }

            .value:before {
                content: " #{$url} "
            }

            .key:before {
                content: "_icon('" + $icon + "', " + $icon-variation + ")"
            }


        }
    }

}

// Create Font Family CSS
@each $font, $value in $fonts {
    .typography-fonts-#{$font} {
        .example {
            font-family: _font($font);

            &:before {
                content: "Example of " + $font + " font"
            }
        }

        .variant {
            &:before {
                content: " " + $font
            }
        }

        .value {
            &:before {
                content: "#{unquote($value)}"
            }
        }

        .key {
            &:before {
                content: "_font('#{$font}')"
            }
        }
    }
}


// Create Font Sizes CSS
@each $size, $value in $sizes {
    .typography-sizes-#{$size} {
        .example {
            font-size: _size($size);

            &:before {
                content: "Example of " + $size + " text"
            }
        }

        .variant {
            &:before {
                content: " " + $size
            }
        }

        .value {
            &:before {
                content: " " + $value
            }
        }

        .key {
            &:before {
                content: "_size('#{$size}')"
            }
        }
    }
}

// Create Font Weights CSS
@each $weight, $value in $weights {

    .typography-weights-#{$weight} {
        .example {
            font-weight: _weight($weight);

            &:before {
                content: "Example of " + $weight + " text"
            }
        }

        .variant {
            &:before {
                content: "#{$weight}"
            }
        }

        .value {
            &:before {
                content: " " + $value
            }
        }

        .key {
            &:before {
                content: "_weight('#{$weight}')"
            }
        }
    }
}


@import "dictionary/en";
// Create DICTIONARY
@each $word, $value in $dictionary {

    .dictionary-english-#{$word} {
        .example {
            &:before {
                content: "#{$value}"
            }
        }

        .variant {
            &:before {
                content: "#{$word}"
            }
        }

        .value {
            &:before {
                content: " " + $value
            }
        }

        .key {
            &:before {
                content: "_dictionary('#{$word}')"
            }
        }
    }
}

@import "dictionary/fr";
// Create DICTIONARY
@each $word, $value in $dictionary {

    .dictionary-french-#{$word} {
        .example {
            &:before {
                content: "#{$value}"
            }
        }

        .variant {
            &:before {
                content: "#{$word}"
            }
        }

        .value {
            &:before {
                content: " " + $value
            }
        }

        .key {
            &:before {
                content: "_dictionary('#{$word}')"
            }
        }
    }
}

@import "dictionary/de";
// Create DICTIONARY
@each $word, $value in $dictionary {

    .dictionary-german-#{$word} {
        .example {
            &:before {
                content: "#{$value}"
            }
        }

        .variant {
            &:before {
                content: "#{$word}"
            }
        }

        .value {
            &:before {
                content: " " + $value
            }
        }

        .key {
            &:before {
                content: "_dictionary('#{$word}')"
            }
        }
    }
}



// Create JSON to pass to StyleSheet
$cssData-fonts: "";
$cssData-weights: "";
$cssData-sizes: "";
$cssData-icons: "";
$cssData-colors: "";
$cssData-dictionary: "";

// FONT FACES
@each $font, $value in $fonts {
    $cssData-fonts: $cssData-fonts + "'#{$font}',"
}

// FONT SIZES
@each $size, $value in $sizes {
    $cssData-sizes: $cssData-sizes + "'#{$size}',"
}

// FONT WEIGHTS
@each $weight, $value in $weights {
    $cssData-weights: $cssData-weights + "'#{$weight}',"
}


// DICTIONARY
@each $word, $value in $dictionary {
    $cssData-dictionary: $cssData-dictionary + "'#{$word}',"
}

// ICONS
@each $icon, $variants in $icons {
    // Loop through variations

    $cssData-icons: $cssData-icons + "'#{$icon}':[";

    @each $icon-variation, $url in map-get($icons, $icon) {
        $cssData-icons: $cssData-icons + "'#{$icon-variation}',";
    }

    $cssData-icons: $cssData-icons + "],";
}

// COLORS
@each $color, $variants in $colors {
    // Loop through variations

    $cssData-colors: $cssData-colors + "'#{$color}':[";

    @each $color-variation, $url in map-get($colors, $color) {
        $cssData-colors: $cssData-colors + "'#{$color-variation}',";
    }

    $cssData-colors: $cssData-colors + "],";
}

// SAVE THE CSS DATA AS JSON TO THE BODY TAG. THAT WAY THE JS CAN PARSE IT AND DISPLAY
body {
    content: "{'dictionary': {'english': [#{$cssData-dictionary}], 'french': [#{$cssData-dictionary}], 'german': [#{$cssData-dictionary}]},'typography':{'fonts':[#{$cssData-fonts}], 'sizes':[#{$cssData-sizes}], 'weights':[#{$cssData-weights}]},'icons':{#{$cssData-icons}},'colors':{#{$cssData-colors}}}"
}
